@import "../base"
.indexCard
  display: block

  .game_interval
    height: 2px
    border: transparent
  $card_size: 250px

  .game_card
    width: $card_size
    background: linear-gradient(70deg, #494949, #4f6480)
    display: flex
    flex-direction: column
    align-items: center
    border: solid transparent
    border-radius: 10px
    justify-content: center
    overflow: hidden

    .spotlight_content
      background-image: url('https://store.akamai.steamstatic.com/public/images/v6/home/background_spotlight.jpg')
      margin: 0
      min-height: 30px
      background-size: cover

    .game_card_header_img
      scale: inherit
      max-width: calc($card_size * 1.2)
      //min-height: calc($card_size / 1.1)
      background-size: cover

    .game_card_info
      display: flex
      flex-direction: column
      align-items: flex-start
      min-width: calc($card_size * 0.99)
      padding-left: 30px
      padding-bottom: 10px

      .game_release_date
        padding: 10px
        color: $font_color_blue
        font-size: calc($card_size / 19)

      .game_price_overview
        display: flex
        flex-direction: row
        color: #BEEE11
        font-size: calc($card_size / 15)
        background: #344654
        padding: 2px

        .discount_percent
          background: #4c6b22
          padding: 5px

        .discount_final
          color: #a9f39d
          padding: 5px


  .game_card_hide
    position: absolute
    width: $card_size
    margin-left: 20+$card_size
    transform: translateY(-90%)
    border: solid transparent
    border-radius: 1%
    font-size: calc($card_size / 16)
    align-items: center
    display: flex
    flex-direction: column
    color: $font_color_black
    background: linear-gradient(#e1e1e1, #95a4bd)

    img
      max-width: calc($card_size / 1.2)
      border-radius: 5px
      border: 2px #bbbbbb solid

    span
      padding: 2px
      justify-content: space-around
      margin-right: auto
      font-size: calc($card_size / 20)

    .game_card_hide_name
      margin: 3px

    .game_card_tags
      margin-bottom: 10px
      display: inline

      label
        float: left
        margin: 2px 2px 2px 2px
        padding: 2px
        color: #dcdcdc
        font-size: calc($card_size / 21)
        background: #6c6c6c
        border-radius: 2px

        &:hover
          background: #b2b2b2

  /*箭头向左*/


  .single
    position: absolute
    margin: 0 20+$card_size 0 0
    border-right: 10px solid #8bc1ec
    border-top: 10px solid transparent
    border-bottom: 10px solid transparent
    z-index: 1
